import React from 'react';
import style from './style.css'
import {uuid} from "../../../util/uitls";
import Map from 'lodash.map'

class Lessons extends React.Component {
    render() {
        return (
            <div className={style.Lessons}>
                <div className={`${style['swiper-container']} swiper-container`} ref={node => this.swiper = node}>
                    <div className="swiper-wrapper">
                        {
                            Map([1, 2, 3, 4], item => {
                                return <div className={`${style['swiper-slide']} swiper-slide`} key={uuid()}>
                                    <div className={style.row1} style={{
                                        backgroundImage: 'url(/static/Bubbles.png)',
                                        backgroundSize: '80%',
                                        borderRadius: '45px'
                                    }}>
                                        <div className={style.wraooerImage}>
                                            <img src="/static/Bubbles.png" alt="" className={style.image}/>
                                        </div>
                                    </div>
                                    <div className={style.row2}>
                                        <div className={style.title}>Introduction</div>
                                        <div className={style.name}>Article</div>
                                    </div>
                                    <div className={style.row3}>
                                        <div className={style.desc}>
                                            Lorem ipsum dolor sit amet,consectetur adipiscing elit sed do eiusmod tempor
                                            incididunt ut labore magna aliqua.
                                        </div>
                                    </div>
                                    <div className={style.row4}>
                                        <button className={style.btn}>start</button>
                                    </div>

                                </div>
                            })
                        }
                        <div className={`${style['swiper-slide']} swiper-slide ${style['swiper-slide-laset']}`}
                             key={uuid()}>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    componentDidMount() {
        var self = this
        var swiper = new Swiper(self.swiper, {
            slidesPerView: 'auto',
            spaceBetween: 40,
        });
    }
}

export default Lessons;